<!--
 * @Description: 引导模式
 * @Author: ZY
 * @Date: 2021-01-21 20:20:18
 * @LastEditors: spark
 * @LastEditTime: 2021-06-23 10:00:29
-->
<template>
    <div class="app-container">
        <aside>
            新手引导
            <a href="https://github.com/kamranahmedse/driver.js" target="_blank"
                >driver.js.</a
            >
        </aside>
        <el-button
            icon="el-icon-question"
            type="primary"
            @click.prevent.stop="guide"
        >
            引导
        </el-button>
    </div>
</template>

<script lang="ts">
import Driver from 'driver.js'
import 'driver.js/dist/driver.min.css'
import steps from './steps'
import { defineComponent, onMounted } from 'vue'

export default defineComponent({
    setup() {
        let driver: Driver | null = null
        onMounted(() => {
            driver = new Driver()
        })

        const guide = () => {
            if (driver) {
                driver.defineSteps(steps)
                driver.start()
            }
        }

        return {
            guide
        }
    }
})
</script>
